<template>
  <div class="yl-container">
    <!-- 按钮组 -->
    <div class="yl-btn-group">
      <YlButton uiType="plain" icon="el-icon-upload2" @click="initTemplatePrj">导入模板</YlButton>
    </div>
    <br>
    <!-- table列表 -->
    <div class="yl-table-list">
      <el-table
        border
        style="margin-bottom: 20px"
        row-key="code"
        default-expand-all
        :tree-props="{children: 'children'}"
        :data="tableData"
        height="700"
      >
        <el-table-column label="项目编号" align="left">
          <template slot-scope="scope">
            <span v-if="!scope.row.is_modify">{{ scope.row.code }}</span>
            <el-input size="mini" v-else type="text" v-model="newPrj.code" :placeholder="scope.row.code" />
          </template>
        </el-table-column>

        <el-table-column label="父级项目编号" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="!scope.row.is_modify">{{ scope.row.parent_code }}</span>
            <el-input size="mini" v-else type="text" v-model="newPrj.parent_code" :placeholder="scope.row.parent_code" />
          </template>
        </el-table-column>

        <el-table-column label="项目名字" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="!scope.row.is_modify">{{ scope.row.name }}</span>
            <el-input size="mini" v-else type="text" v-model="newPrj.name" :placeholder="scope.row.name" />
          </template>
        </el-table-column>

        <el-table-column label="类型" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="!scope.row.is_modify">{{ scope.row.kind }}</span>
            <el-input size="mini" v-else type="text" v-model="newPrj.kind" :placeholder="scope.row.kind" />
          </template>
        </el-table-column>

        <el-table-column label="标准" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="!scope.row.is_modify">{{ scope.row.standard }}</span>
            <el-input size="mini" v-else type="text" v-model="newPrj.standard" :placeholder="scope.row.standard" />
          </template>
        </el-table-column>

        <el-table-column label="操作" align="left" width="200">
          <template slot-scope="scope">
            <YlButton uiType="main" v-show="!isChange" @click="openEditLine(scope.row)">编辑</YlButton>
            <YlButton uiType="main" btnType="danger" v-show="!isChange" @click="deleteSingleLine(scope.row)">删除</YlButton>
            <YlButton uiType="main" btnType="success" v-show="isChange" @click="acceptChange(scope.row)">保存</YlButton>
            <YlButton uiType="main" btnType="info" v-show="isChange" @click="cancel(scope.row)">取消</YlButton>
          </template>
        </el-table-column>
        <div class="yl-table-empty" slot="empty">
          <img src="~@/assets/icons/svg/no-data.svg">
          <div>暂无数据</div>
        </div>
      </el-table>
      <div style="text-align: right" v-if="tableData.length !== 0">
        <YlButton uiType="default" btnType="success" icon="el-icon-upload" @click="submitMethod">确 定 上 传</YlButton>
      </div>
    </div>

      <!-- 导入dialog -->
      <el-dialog title="导入模板" :visible.sync="dialogFormVisible" width="700px" class="yl-dialog">
        <upload
          ref="upload"
          style="margin: 0 auto"
          :action="this.GLOBAL.HTTP_URL + '/budget/time/upload/template'"
          accept=".xlsx, .xls"
          :drag="true"
          listType="''"
          :limit="1"
          @file-List="getFileList"
        />
        <div slot="footer" class="dialog-footer">
          <YlButton uiType="default" @click="onSubmit">确 定</YlButton>
          <YlButton uiType="default" btnType="info" @click="dialogFormVisible = false">取 消</YlButton>
        </div>
      </el-dialog>

      <!-- 上传dialog -->
      <el-dialog title="上传模板" :visible.sync="openSubmitDialog" width="1184px" class="yl-dialog">
        <YlForm
          ref="ylform"
          :formConfig="formConfig"
          @close-dialog="getCloseDialog"
          @init-state="getInitState"
        />
      </el-dialog>
  </div>
</template>

<script>
import upload from '@/components/YlForm/src/upload'
import {
  deepClone
} from '@/utils'
export default {
  components: {
    upload
  },
  data () {
    return {
      dialogFormVisible: false,
      tableData: [],
      file: {},
      isChange: false,
      newPrj: {
        code: '',
        parent_code: '',
        name: '',
        kind: '',
        standard: ''
      },
      openSubmitDialog: false,
      formConfig: {
        labelWidth: 'auto',
        btnMethod: ['submit', 'cancel'],
        formData: {
          data: this.tableData,
          timing: [],
          budget_end_time: '',
          kind: '1'
        },
        editRules: {
          timing: [
            { required: true, message: '请选择预算开始结束时间', trigger: 'change' }
          ],
          budget_end_time: [
            { required: true, message: '请选择编制结束时间', trigger: 'change' }
          ],
          kind: [
            { required: true, message: '请选择预算编制类型', trigger: 'change' }
          ]
        },
        columns: [
          {
            type: 'select',
            label: '预算编制类型',
            multiple: false,
            prop: 'kind',
            options: [
              { value: '3', label: '通用' },
              { value: '1', label: '行政' },
              { value: '2', label: '教学' }
            ]
          },
          {
            type: 'timeRange',
            label: '预算开始结束时间',
            prop: 'timing',
            timer: {
              start_time: '',
              end_time: ''
            }
          },
          {
            type: 'time',
            label: '编制结束时间',
            prop: 'budget_end_time'
          }
        ],
        addApi: this.$ylapi.addNewBudgetTime
      }
    }
  },
  methods: {
    // 导入模板初始化
    initTemplatePrj () {
      this.dialogFormVisible = true
      this.$nextTick(() => this.$refs['upload'].$refs['upload'].clearFiles())
    },

    // 确认发起预算执行阶段
    onSubmit () {
      if (this.file.response && this.file.response.data) {
        this.dialogFormVisible = false
        this.tableData = deepClone(this.file.response.data)
        this.$modal.success(this, '导入成功')
      } else {
        this.$modal.warning(this, '请上传相应文件模板')
      }
    },

    // 获取上传的文件
    getFileList (val) {
      this.file = val
    },

    // 打开某一行进行编辑
    openEditLine (row) {
      this.newPrj = {
        code: '',
        parent_code: '',
        name: '',
        kind: '',
        standard: ''
      }
      this.isChange = true
      row.is_modify = true
    },

    // 确认上传
    submitMethod () {
      this.openSubmitDialog = true
      this.formConfig.formData.data = JSON.stringify(deepClone(this.tableData))
    },

    // 删除某一行
    deleteSingleLine (row) {
      let code = row.code
      let parentCode = row.parent_code
      let data = this.tableData
      for (let i in data) {
        if (
          data[i].code === code &&
          data[i].parent_code === parentCode
        ) {
          this.removeElem(data, row)
        } else {
          this.findSingleTreeData(data, code)
        }
      }
    },

    // 取消操作
    cancel (row) {
      this.isChange = false
      row.is_modify = false
    },

    // 遍历树节点
    findSingleTreeData (data, code) {
      var newData = data.filter(x => x.code !== code)
      newData.forEach(x => x.children && (x.children = this.findSingleTreeData(x.children, code)))
      return newData
    },

    // 修改某一行
    acceptChange (row) {
      row.code = this.newPrj.code ? this.newPrj.code : row.code
      row.parent_code = this.newPrj.parent_code ? this.newPrj.parent_code : row.parent_code
      row.name = this.newPrj.name ? this.newPrj.name : row.name
      row.kind = this.newPrj.kind ? this.newPrj.kind : row.kind
      row.standard = this.newPrj.standard ? this.newPrj.standard : row.standard
      row.is_modify = false
      this.isChange = false
    },

    // 初始化
    getInitState () {
      this.openSubmitDialog = false
      this.tableData = []
      this.$router.push('/showStage')
    },

    // 关闭弹窗
    getCloseDialog (val) { this.openSubmitDialog = val }
  }
}
</script>
